<!-- 配置编辑弹窗 -->
<template>
    <el-dialog
      :title="isUpdate?'修改定时任务':'添加定时任务'"
      :visible="visible"
      width="440px"
      :destroy-on-close="true"
      :lock-scroll="false"
      @update:visible="updateVisible">
      <el-form
        :model="form"
        ref="form"
        :rules="rules"
        label-width="102px">
        <el-form-item
          label="任务名称:"
          prop="name">
          <el-input
            :maxlength="20"
            v-model="form.name"
            placeholder="请输入任务名称"
            clearable/>
        </el-form-item>
        <el-form-item
          label="任务类名:"
          prop="classpath">
          <el-input
            :maxlength="200"
            v-model="form.classpath"
            placeholder="请输入任务类名"
            clearable/>
        </el-form-item>
        <el-form-item
          label="任务描述:"
          prop="description">
          <el-input
            :maxlength="200"
            v-model="form.description"
            placeholder="请输入任务类名"
            clearable/>
        </el-form-item>
        <el-form-item label="定时表达式:" prop="cron">
          <el-input
            v-model="form.cron"
            placeholder="请输入定时表达式"
            :maxlength="200"
            />
        </el-form-item>
        <el-form-item label="运行状态:" prop="status">
            <el-switch
            v-model="form.status"
            :active-value="1"
            :inactive-value="0"/>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button
          @click="updateVisible(false)">取消
        </el-button>
        <el-button
          type="primary"
          @click="save"
          :loading="loading">保存
        </el-button>
      </div>
    </el-dialog>
  </template>
  
  <script>
  export default {
    name: 'TaskEdit',
    props: {
      // 弹窗是否打开
      visible: Boolean,
      // 修改回显的数据
      data: Object
    },
    data() {
      return {
        // 表单数据
        form: {
            name:"",
            classpath:"",
            description:"",
            cron:"",
            status:1
        },
        // 表单验证规则
        rules: {
          name: [
            {required: true, message: '请输入任务名称', trigger: 'blur'}
          ],
          classpath: [
            {required: true, message: '请输入任务类名', trigger: 'blur'}
          ],
          cron: [
            {required: true, message: '请输入定时表达式', trigger: 'blur'}
          ]
        },
        // 提交状态
        loading: false,
        // 是否是修改
        isUpdate: false
      };
    },
    watch: {
      data() {
        if (this.data) {
          this.form = Object.assign({}, this.data);
          this.isUpdate = true;
        } else {
          this.form = {};
          this.isUpdate = false;
        }
      }
    },
    methods: {
      /* 保存编辑 */
      save() {
        this.$refs['form'].validate((valid) => {
          if (valid) {
            this.loading = true;
            this.$http[this.isUpdate ? 'put' : 'post'](this.isUpdate ? '/scheduled/edit' : '/scheduled/add', this.form).then(res => {
              this.loading = false;
              if (res.data.code === 0) {
                this.$message.success(res.data.msg);
                if (!this.isUpdate) {
                  this.form = {};
                }
                this.updateVisible(false);
                this.$emit('done');
              } else {
                this.$message.error(res.data.msg);
              }
            }).catch(e => {
              this.loading = false;
              this.$message.error(e.message);
            });
          } else {
            return false;
          }
        });
      },
      /* 更新visible */
      updateVisible(value) {
        this.$emit('update:visible', value);
      }
    }
  }
  </script>
  
  <style scoped>
  </style>
  